<template>
  <div style="height: 100%">
    <div ref="myChart" :style="{ height: `100%`, width: `100%` }"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
import { ref } from 'vue';
import echarts, { ECharts } from 'echarts';
import { addListener, removeListener } from 'resize-detector';
import dark from '@/components/chart/dark';
import { debounce } from 'lodash-es';
import { getDataZoomVisibie, getDatazoomEnd } from '@/components/charts/util';
echarts.registerTheme('dark-pro', dark);
export default defineComponent({
  props: {
    height: {
      type: Number,
      default: 200,
    },
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, context) {
    const echartsOption = ref<any>({
      color: [
        '#4992ff',
        '#7cffb2',
        '#fddd60',
        '#ff6e76',
        '#58d9f9',
        '#05c091',
        '#ff8a45',
        '#8d48e3',
        '#dd79ff',
        '#fda67e',
        '#81cacc',
        '#cca8ba',
        '#88cc81',
        '#82a0c5',
        '#fddb7e',
        '#735ba1',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3',
        '#C1232B',
        '#B5C334',
        '#FCCE10',
        '#E87C25',
        '#27727B',
        '#FE8463',
        '#9BCA63',
        '#FAD860',
        '#F3A43B',
        '#60C0DD',
      ],
      grid: {
        left: '3%',
        top: 20,
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params) {
          let value = props.option.newDara[params[0].dataIndex];
          return `<div>${value.name}</div><div>百分比:${value.percent}</div><div>${value.name}:${value.caseNum}</div>`;
        },
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B9B8CE',
          },
          interval: 0,
          rotate: 30,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#484753',
          },
        },
      },

      dataZoom: [
        {
          type: 'slider',
          show: true, //显示滚动条
          zoomLock: true, //锁定滚动条缩放，（固定滚动条长度）
          xAxisIndex: [0],
          bottom: '0',
          end: '20',
          borderColor: '#484753', //边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
          showDetail: false, //关闭：拖拽时候显示详细数值信息。
          handleSize: '92%', //矢量尺寸占比
          height: 15,
          orient: 'horizontal',
          minValueSpan: 1,
          maxValueSpan: 20,
          showDataShadow: 'auto',
          filterMode: 'filter',
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#B9B8CE',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#484753', //Y轴颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#484753', //Y轴颜色
            },
          },
        },
      ],
      series: [],
    });
    const myChart = ref<any>();
    let chart: ECharts | null = null;
    const resizeChart = () => {
      chart?.resize();
    };
    const resize = debounce(resizeChart, 300);
    const myCharts = ref<any>();
    const init = () => {
      chart = echarts.init(myChart.value!);
      echartsOption.value.dataZoom[0].show = getDataZoomVisibie(
        myChart.value,
        props.option.yData.length,
      );
      let length;
      if (props.option.yData.length > 400) {
        length = 110;
      } else {
        length = 20;
      }

      echartsOption.value.dataZoom[0].end = getDatazoomEnd(myChart.value, length);
      chart.setOption(echartsOption.value, true);
      addListener(myChart.value, resize);
      (chart as any).getZr().on('click', function (params) {
        const position = [params.offsetX, params.offsetY];
        let index;
        if ((chart as any).containPixel('grid', position)) {
          index = (chart as any).convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
        }

        context.emit('clickEchart', index);
      });
    };
    onMounted(() => {
      echartsOption.value.series = props.option.yData;
      echartsOption.value.xAxis.data = props.option.xData;
      init();
    });
    watch(
      () => props.option,
      () => {
        echartsOption.value.series = props.option.yData;
        echartsOption.value.xAxis.data = props.option.xData;
        init();
      },
      {
        deep: true,
      },
    );
    watch(
      () => props.height,
      () => {
        echartsOption.value.series = props.option.yData;
        echartsOption.value.xAxis.data = props.option.xData;
        init();
      },
      {
        deep: true,
      },
    );
    onUnmounted(() => {
      if (myChart.value) {
        removeListener(myChart.value, resize);
      }
      chart?.dispose();
      chart = null;
    });
    return {
      echartsOption,
      myChart,
      init,
      myCharts,
      resizeChart,
    };
  },
});
</script>
